<template lang="pug">
  v-container
    AssetFormDialog(ref="assetFormDialog", :asset = "asset" @refresh="refresh" formType="AssetForm" )
    AssetDetails(ref="assetDetail", :asset = "asset" @refresh="refresh")
    v-card
      v-toolbar
        //- v-toolbar-title Title
        v-text-field(prepend-inner-icon="search" placeholder="搜索" hide-details v-model="query" clearable)
        v-spacer
        v-toolbar-items
          v-btn(text @click="refresh") 刷新
          v-btn(text @click="add") 新增资产
          v-btn(text @click="exportAssetExcelTemplate") 导出Excel模板
          v-btn(text @click="exportDataAsExcel") 导出资产
          v-btn(text @click="importAssetExcel") 导入Excel数据
          input(v-show="false" type="file" ref="importFile" accept="application/vnd.openxmlformats-officedocument.spreadsheetml.sheet" @input="onImportFileChange")
      v-divider
      v-card-text.pa-0.mt-4
        AssetDataTable(@edit="edit" ref="dataGrid" :query.sync = "query")
</template>
<script>
import { mapActions } from 'vuex'
import AssetMixin from './AssetMixin'
import AssetDataTable from './asset_data_table'
import AssetDetails from './asset_details'
import AssetFormDialog from './asset_form_dialog'
export default {
  mixins: [AssetMixin],
  props: [],
  methods: {
    ...mapActions('asset', {
      downloadTemplate: 'downloadAssetImportTemplate',
      downloadExcel: 'downloadExcel',
      import: 'import',
      bootstrap: 'bootstrap'
    }),
    add() {
      this.asset = {
        name: '',
        product_model_number: '',
        category_id: null,
        sub_category_id: null,
        brand_id: null,
        sn: '',
        status_id: 1,
        affiliation_id: null,
        keeper_id: null,
        description: '',
        marking_price: 0,
        bid_price: 0,
        bid_date: '',
        vendor_id: null,
        location_id: null
      }
      this.$refs.assetDetail.toggle('新增资产', true)
    },
    edit(asset) {
      this.asset = asset
      this.$refs.assetDetail.toggle(`${this.asset.name}`)
    }
  },
  components: { AssetDataTable, AssetFormDialog, AssetDetails },
  computed: {},
  data() {
    return {
      query: '',
      asset: {}
    }
  },
  mounted() {}
}
</script>